<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入驻歌手页面</title>
    <link rel="stylesheet" href="./css/singer.css">
</head>

<body>
    <div class="singer">
        <!-- 顶部导航栏 -->
        <div class="nav">
            <!-- 版心 -->
            <div class="center">
                <div class="top-nav">
                    <h3><a href="" class="text">网易云音乐</a></h3>
                    <ul class="left">
                        <li><a href="">发现音乐</a></li>
                        <li><a href="#">我的音乐</a></li>
                        <li><a href="#">关注</a></li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">音乐人</a></li>
                    </ul>
                    <!-- 右侧搜索框 -->
                    <div class="search">
                        <input type="text" placeholder="输入要搜索的音乐名或歌手名">
                        <button class="author">创作者中心</button>
                        <a class="load" href="#">登录</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间红色条 -->
        <div class="nav2"> </div>
        <!-- 主体内容 -->
        <div class="main">
            <!-- 一楼头像区域 -->
            <div class="f1">
                <div class="avatar">
                    <img src="./img/singer/1.png">
                </div>
                <div class="wenzi">
                    <div class="name">
                        <div>
                            <span>张惠妹aMEI</span>
                            <a href="#">
                                <button class="btn1">发私信</button>
                            </a>
                            <a href="#">
                                <button class="btn2">+&nbsp;关注</button>
                            </a>
                            <a>
                                <button class="btn3">查看歌手页</button>
                            </a>
                        </div>
                        <p>台湾歌手张惠妹</p>
                    </div>
                    <ul>
                        <li>
                            <strong>1</strong>
                            <span>动态</span>
                        </li>
                        <li>
                            <strong>13</strong>
                            <span>关注</span>
                        </li>
                        <li>
                            <strong>654322</strong>
                            <span>粉丝</span>
                        </li>
                    </ul>
                    <div class="jieshao">个人介绍：亞洲國寶級傳奇天后「 a MEI」我是a MEI,一個你認識很久,卻認識不完的女人</div>
                    <div class="diqu">所在地区：台湾省 - 台北市</div>
                </div>
            </div>

            <!-- 二楼听歌排行区域 -->
            <div class="f2">
                <div class="head">
                    <h3>听歌排行</h3>
                    <span class="sp1">累计听歌38曲</span>
                    <span class="sp2">所有时间</span>
                    <span class="sp4">|</span>
                    <span class="sp3">最近一周</span>
                </div>
                <ul id="song">
                    <li>
                        <span>1.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>飞高高</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span>2.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>再见青春</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span>3.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>自虐</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span>4.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>再见青春</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span>5.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>这样你还爱我吗</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span>6.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>都对也都错</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span>7.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>北京北京</h5>
                            <span>-汪峰</span>
                        </div>
                    </li>
                    <li>
                        <span>8.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>再见青春</h5>
                            <span>-汪峰</span>
                        </div>
                    </li>
                    <li>
                        <span>9.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>跑进来</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                    <li>
                        <span class="li-span">10.&nbsp;&nbsp;&nbsp;&nbsp;></span>
                        <div>
                            <h5>前进乌托邦</h5>
                            <span>-张惠妹aMEI</span>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 三楼创建歌单区域区域 -->
            <div class="f3">
                <h3>张惠妹aMEI创建的歌单(3)</h3>
                <ul>
                    <li>
                        <div><img src="./img/singer/2.jpg" alt=""></div>
                        <h5>张惠妹aMEI的歌单里面充满了故事</h5>
                    </li>
                    <li class="li">
                        <div><img src="./img/singer/3.jpg" alt=""></div>
                        <h5>听听我好友的歌</h5>
                    </li>
                    <li class="li">
                        <div><img src="./img/singer/4.jpg" alt=""></div>
                        <h5>那些年我们的梦</h5>
                    </li>
                </ul>
            </div>

            <!-- 底部导航栏 -->

        </div>
        <!-- 底部导航栏 -->
        <div class="footer-nav">
            <div class="center-foot">
                <div class="footer">
                    <!-- 底部左边 -->
                    <div>
                        <!-- 底部左边第一行 -->
                        <p>
                            <a href="">服务条款</a>
                            <span>|</span>
                            <a href="">隐私政策</a>
                            <span>|</span>
                            <a href="">儿童隐私政策</a>
                            <span>|</span>
                            <a href="">版权投诉</a>
                            <span>|</span>
                            <a href="">投资者关系</a>
                            <span>|</span>
                            <a href="">广告合作</a>
                            <span>|</span>

                        </p>
                        <!-- 底部左边第二行 -->
                        <p>
                            <span>网易科技有限公司</span>
                            <span>运营：浙网文[2021] 1186-054号</span>
                        </p>
                        <!-- 底部左边第三行 -->
                        <p>
                            <span>粤B2-20090191-18</span>
                            <span>工业和信息化部管理系统网站</span>
                            <span>浙公网安备 54821498号</span>
                        </p>
                    </div>
                    <!-- 底部右边 -->
                    <ul>
                        <li><img src="./img/index/footer1.png" alt=""> </li>
                        <li><img src="./img/index/footer2.png" alt=""> </li>
                        <li><img src="./img/index/footer3.png" alt=""> </li>
                        <li><img src="./img/index/footer4.png" alt=""> </li>
                        <li><img src="./img/index/footer5.png" alt=""> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>

</html>